<template>
	<div class="view-liveStyle-menu">
		<mt-button @click="openLiveStyleMenu" class="liveStyle-entry page-btn" plain>
			<i class="iconfont icon-instagram-11"></i>
		</mt-button>
		<mt-popup v-model="liveStyleMenu.isShowLiveStyleMenu" position="bottom" class="liveStyle-menu">
			<div class="liveStyle-inner flex">
				<div @click="goPage('liveBefore')" class="item-left flex flex-direction-v flex-center-vh">
					<div class="img-wrap">
						<mt-button @click="openLiveStyleMenu" class="liveStyle-video page-btn" plain>
							<i class="iconfont icon-zhibo"></i>
						</mt-button>
					</div>
					摄像头直播
				</div>
				<div class="item-right flex flex-direction-v flex-center-vh">
					<div class="img-wrap">
						<mt-button @click="openLiveStyleMenu" class="liveStyle-game page-btn" plain>
							<i class="iconfont icon-youxi"></i>
						</mt-button>
					</div>
					手游直播
				</div>
			</div>
		</mt-popup>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import util from '@/util/Util';

	export default {
		name: 'LiveStyleMenu',
		data() {
			return {}
		},
		mounted() {
			let vm = this;
		},
		computed: {
			...mapState({
				liveStyleMenu: state => state.liveStyleMenu,
			}),
		},
		beforeDestroy() {
			let vm = this;
			vm.closeLiveStyleMenu();
		},
		methods: {
			...mapMutations([
				'SHOW_LIVE_STYLE_MENU',
			]),
			goPage(page) {
				let vm = this;
				util.goPage(vm, page);
			},
			// 显示直播方式弹出框
			openLiveStyleMenu() {
				let vm = this;
				vm.SHOW_LIVE_STYLE_MENU({
					'isShowLiveStyleMenu': true
				})
			},
			// 隐藏直播方式弹出框
			closeLiveStyleMenu() {
				let vm = this;
				vm.SHOW_LIVE_STYLE_MENU({
					'isShowLiveStyleMenu': false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-liveStyle-menu {
		.page-btn {
			width: 40px;
			height: 40px;
			padding: 0;
			color: white;
			border: none;
			border-radius: 50%;
		}
		.liveStyle-entry {
			position: absolute;
			right: 15px;
			bottom: 70px;
			background-color: #f2b037;
			.icon-instagram-11 {
				position: relative;
				top: 1px;
				font-size: 18px;
			}
		}
		.liveStyle-menu {
			width: 100%;
			color: #6c6c6c;
			font-size: 12px;
			.liveStyle-inner {
				width: 100%;
				padding: 25px 35px;
				.item-left {
					width: 50%;
				}
				.item-right {
					width: 50%;
				}
				.liveStyle-video {
					width: 45px;
					height: 45px;
					background-color: #1bd49c;
					margin-bottom: 10px;
					padding: 5px;
					.icon-zhibo {
						font-size: 28px;
					}
				}
				.liveStyle-game {
					width: 45px;
					height: 45px;
					background-color: #b45dff;
					margin-bottom: 10px;
					padding: 5px;
					.icon-youxi {
						font-size: 28px;
					}
				}
			}
		}
	}
</style>

<style lang="scss">
	.view-liveStyle-menu {}
</style>